<!--
* @description 参数1
* @fileName 06.显示隐藏2
* @author userName
* @date 2024-01-22 13:36:33
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>06.显示隐藏2</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="handlerShowOrHide">{{msg}}</button>
        <!-- 单if -->
        <div v-show="flag" style="width: 500px;height: 500px;background-color: red;">我是一个盒子</div>
    </div>

    <script>
        /*
        v-show：控制样式display的属性  进行元素的显示和隐藏
                只能控制一层
        v-if ： 通过节点的移除和添加 控制元素的显示和隐藏
        适用场景: 不适用频繁切换的功能 因为频繁显示和隐藏  一直会操作dom 影响性能
        
        
        */
        var vm = new Vue({
            data:{
                msg:"隐藏",
                flag:true
            },
            methods:{
                handlerShowOrHide() {
                    this.flag = !this.flag
                    this.msg =  this.msg == "显示" ? "隐藏" :"显示"

                }
            }
        });
        vm.$mount("#app")
    </script>
</body>

</html>